<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- bootstrapValidator -->
    <link rel="stylesheet" href="./assets/plugins/plugins/bootstrap-validator/bootstrapValidator.min.css">

    <!-- mui -->
    <link rel="stylesheet" href="./assets/plugins/plugins/mui/css/mui.min.css">

    <!-- city-picker -->
    <link rel="stylesheet" href="./assets/plugins/plugins/city-picker/city-picker.css">

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 页面独立的 -->
    <link rel="stylesheet/less" href="./assets/css/ContactAdd.less" />
    <style>
        .city-picker-span{
            width: 100%!important;
        }
    </style>
</head>

<body>

    <header class="mui-bar mui-bar-nav mui-bar-nav-bg">
        <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <!-- <a class="mui-action-back mui-icon mui-icon-home mui-pull-right mui-a-color"></a> -->
        <h1 class="mui-title">基本资料</h1>
    </header>
    <div style="height: 44px;"></div>
    <!-- 新建联系人 -->
    <div class="info">
        <h3 class="title wow fadeInUp">编辑住户</h3>

        <p class="desc wow fadeInUp" data-wow-delay="200ms" style="color: #fff;">
            您可在本页编辑您的住户，编辑成功后名片将会出现在首页。
        </p>
    </div>

    <form class="contact wow fadeInUp" id="edit" data-wow-delay="300ms">
        <div class="form-group">
            <label for="nickname">姓名</label>
            <input type="text" class="form-control" name="nickname" id="nickname" placeholder="请输入姓名" required />
        </div>

        <div class="form-group">
            <label for="mobile">手机</label>
            <input type="text" class="form-control" name="mobile" id="mobile" placeholder="请输入手机" required />
        </div>

        <div class="form-group">
            <label for="gender">性别</label>
            <select class="form-control" id="gender">
                <option value="0">保密</option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
        </div>

        <div class="form-group" style="position: relative;">
            <label for="region">地区</label>
            <input type="text" class="form-control" id="region" readonly placeholder="请选择地区" data-toggle="city-picker" required />
        </div>

        <div class="form-group">
            <label for="typeid">分类</label>
            <select class="form-control" id="typeid">
                <option value="">请选择</option>
            </select>
        </div>

        <div class="form-group">
            <label for="remark">备注（房间号、身份证号...）</label>
            <input type="text" class="form-control" name="remark" id="remark" placeholder="请输入备注" />
        </div>
        
        <div class="action">
            <button class="btn">提交</button>
        </div>
    </form>

</body>

</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- bootstrapValidator -->
<script src="./assets/plugins/plugins/bootstrap-validator/bootstrapValidator.min.js"></script>

<!-- mui -->
<script src="./assets/plugins/plugins/mui/js/mui.min.js"></script>

<!-- axios -->
<script src="./assets/plugins/plugins/axios/axios.min.js"></script>

<script src="./assets/plugins/plugins/axios/request.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<script src="./assets/plugins/plugins/city-picker/city-picker.data.min.js"></script>
<script src="./assets/plugins/plugins/city-picker/city-picker.min.js"></script>

<!-- cookie -->
<script src="./assets/plugins/plugins/cookie.js"></script>

<!-- login -->
<script src="./assets/js/login.js"></script>

<!-- helpers -->
<script src="./assets/plugins/plugins/helpers.js"></script>

<script>
    //实例化wow.js
    new WOW().init()

    let cardid = getParam('cardid');

// 获取登录信息
let business = cookie.get('business') ? JSON.parse(cookie.get('business')) : {};

// 请求通讯录的分类数据
(async () => {
    let result = await POST({
        url:'card/card/type'
    });

    if(result && result.code === 1)
    {
        let option = '';

        for(let item of result.data)
        {
            option += `<option value="${item.id}">${item.name}</option>`;
        }

        $('#typeid').append(option);
    }
})();

(async () => {
    let data = {
        businessid:business.id,
        cardid
    }

    let result = await POST({
        url:'card/card/check',
        params:data
    });

    if(result && result.code === 0)
    {
        mui.toast(result.msg);
        setTimeout(() => {
            location.href = 'index.html';
        },2000);

        return;
    }

    let info = result.data;

    $('#nickname').val(info.nickname);
    $('#mobile').val(info.mobile);
    $('#gender').val(info.gender);
    
    $('#remark').val(info.remark);

    $('#region').citypicker('reset');
    $('#region').citypicker('destroy');
    $('#region').citypicker({
        province: info.province_text,
        city: info.city_text,
        district: info.district_text
    });

    $('#typeid').val(info.typeid);
})();

// 实例化表单验证插件
$('#edit').bootstrapValidator({
    // 填写配置项
    message:'表单内容不能为空',// 所有字段默认错误信息
    // 字段校验图标。默认bootstrap图标
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    // 需要验证的字段
    fields:{
        nickname:{
            validators: {
                notEmpty: { // 非空校验
                    message: '姓名不能为空'
                }
            }
        },
        mobile:{
            validators: {
                notEmpty: { // 非空校验
                    message: '手机号不能为空'
                },
                stringLength: { // 长度校验
                    min: 11,
                    max: 11,
                    message: '手机号必须是11位'
                },
                regexp: { //正则校验
                    regexp: /^1[3456789]\d{9}$/, 
                    message:'手机号错误'
                },
            }
        },
        remark:{
            validators:{
                notEmpty: { // 非空校验
                    message: '备注不能为空'
                },
            }
        }
    }
}).on('success.form.bv',function(e){
    // 阻止多次提交
    e.preventDefault();
});

// 提交事件
$('#edit').on('submit',async () => {
    // 如果验证不过就不执行后面代码 data => js dateset
    if(!$('#edit').data('bootstrapValidator').isValid())
    {
        // 重置表单
        // $('#edit').data('bootstrapValidator').resetForm();
        return;
    }

    // 封装数据
    let data = {
        cardid,
        businessid:business.id,
        nickname:$.trim($('#nickname').val()),
        mobile:$.trim($('#mobile').val()),
        gender:$('#gender').val(),
        remark:$.trim($('#remark').val())
    }

    // 处理分类
    let typeid = $('#typeid').val();

    if(!typeid)
    {
        mui.toast('请选择分类');
        return;
    }

    data.typeid = typeid;

    // 地区
    let citypicker = $('#region').data("citypicker");
    let code = citypicker.getCode("district") || citypicker.getCode("city") || citypicker.getCode("province");

    if(!code)
    {
        mui.toast('请选择地区');
        return;
    }

    data.region = code;

    let result = await POST({
        url:'card/card/edit',
        params:data
    });

    if(result && result.code === 1)
    {
        mui.toast(result.msg);
        setTimeout(() => {
            location.href = 'index.html';
        },2000);

        return;
    }else{
        mui.toast(result.msg);
        return;
    }
});


</script>